Чому HTML думає, що "chucknorris" - це колір?

Це перехід з часів Netscape:
Відсутні цифри розглядаються як 0 [...]. Неправильна цифра просто інтерпретується як 0. Наприклад, значення # F0F0F0, F0F0F0, F0F0F, #FxFxFx та FxFxFx однакові.
Це з допису в блозі Трохи роздумів про розбір кольорів Microsoft Internet Explorer, який охоплює його дуже детально, включаючи різну довжину значень кольору тощо.
Якщо ми застосовуємо правила по черзі з повідомлення в блозі, ми отримуємо наступне:
Замініть усі недійсні шістнадцяткові символи на 0:
chucknorris стає c00c0000000
Додайте до наступної загальної кількості символів, що ділиться на 3 (11 → 12):
c00c 0000 0000
Розділити на три рівні групи, причому кожен компонент представляє відповідний колірний компонент кольору RGB:
RGB (c00c, 0000, 0000)
Зрізати кожен аргумент праворуч до двох символів.
Що, нарешті, дає такий результат:
RGB (c0, 00, 00) = # C00000 або RGB (192, 0, 0)
Ось приклад, що демонструє атрибут bgcolor в дії, щоб створити цей "дивовижний" зразок кольору:
<таблиця>

 Чак Норріс 
 Містер Т 
 ninjaturtle 


 хворий 
 лайно 
 трава 


Це також відповідає на іншу частину запитання: Чому bgcolor = "chucknorr" створює жовтий колір? Ну, якщо ми застосовуємо правила, рядок такий:
c00c00000 => c00 c00 000 => c0 c0 00 [RGB (192, 192, 0)]
Що дає світло-жовте золото. Оскільки рядок починається з 9 символів, на цей раз ми зберігаємо другу «С», отже, вона закінчується кінцевим значенням кольору.
Я спочатку зіткнувся з цим, коли хтось зазначив, що ви можете зробити color = "crap", і, ну, це виходить коричневим.
|
Мені шкода, що я не погоджуюсь, але згідно з правилами аналізу застарілого значення кольору, опублікованого @Yuhong Bao, chucknorris НЕ прирівнюється до # CC0000, а до # C00000, дуже схожого, але дещо іншого відтінку червоного. Я використав надбудову Firefox ColorZilla для підтвердження цього.
Правила визначають:
зробіть рядок довжиною, кратною 3, додавши 0: chucknorris0
розділіть струну на 3 рівномірні струни: chuc knor ris0
усічити кожен рядок до 2 символів: ch kn ri
збережіть шістнадцяткові значення та додайте 0, де це необхідно: C0 00 00
Я зміг використати ці правила, щоб правильно інтерпретувати наступні рядки:
LuckyCharms
Удача
LuckBeALady
LuckBeALadyTonight
Гангам стиль
ОНОВЛЕННЯ: Оригінальні відповідачі, які сказали, що колір # CC0000, відтоді відредагували свої відповіді, включивши виправлення.
|
Більшість браузерів просто ігноруватимуть будь-які НЕ-шістнадцяткові значення у вашому кольоровому рядку, замінюючи не шістнадцяткові цифри нулями.
ChuCknorris перекладається як c00c0000000. На цьому етапі браузер розділить рядок на три рівні секції із зазначенням червоного, зеленого та синього значень: c00c 0000 0000. Зайві біти в кожному розділі будуть ігноруватися, що робить кінцевий результат # c00000 червонуватого кольору.
Зауважте, це не стосується розбору кольорів CSS, які відповідають стандарту CSS.
  Червонуватий  
  Те саме, що вище  
  Чорний  
|
Причина в тому, що браузер не може його зрозуміти і спробувати якось перевести його на те, що він може зрозуміти, і в цьому випадку в шістнадцяткове значення! ...
chucknorris починається з c, який розпізнається в шістнадцятковій, а також перетворює всі невпізнані символи в 0!
Тож chucknorris у шістнадцятковому форматі стає: c00c00000000, всі інші символи стають 0, а c залишається там, де вони є ...
Тепер вони діляться на 3 для RGB (червоний, зелений, синій) ... R: c00c, G: 0000, B: 0000 ...
Але ми знаємо, що дійсний шістнадцятковий для RGB складає лише 2 символи, означає R: c0, G: 00, B: 00
Тож реальний результат:
bgcolor = "# c00000";
Я також додав кроки на зображенні як короткий довідник для вас:
|
Браузер намагається перетворити chucknorris у шістнадцятковий колірний код, оскільки це неприпустиме значення.
У chucknorris все, крім c, не є дійсним шістнадцятковим значенням.
Тож він перетворюється на c00c00000000.
Що стає # c00000, червоним відтінком.
Здається, це проблема головним чином з Internet Explorer та Opera (12), оскільки і Chrome (31), і Firefox (26) просто ігнорують це.
P.S. Цифри в дужках - це версії браузера, на яких я тестував.
На більш легкій ноті
Чак Норріс не відповідає веб-стандартам. Веб-стандарти відповідають
йому. # BADA55
|
Специфікація WHATWG HTML має точний алгоритм аналізу застарілого кольорузначення:
https://html.spec.whatwg.org/multipage/infrastructure.html#rules-for-parsing-a-legacy-colour-value.
Код Netscape Classic, який використовується для розбору кольорових рядків, є відкритим:
https://dxr.mozilla.org/classic/source/lib/layout/layimage.c#155.
Наприклад, зауважте, що кожен символ аналізується як шістнадцяткова цифра, а потім переводиться у 32-бітове ціле число без перевірки на переповнення. Лише вісім шістнадцяткових цифр вміщуються в 32-бітове ціле число, саме тому враховуються лише останні 8 символів. Після синтаксичного аналізу шістнадцяткових цифр на 32-розрядні цілі числа, вони потім усікаються на 8-розрядні цілі числа, ділячи їх на 16, поки вони не поміщаються в 8-розрядні, тому провідні нулі ігноруються.
Оновлення: Цей код не точно відповідає визначеному в специфікації, але єдина різниця - кілька рядків коду. Я думаю, що були додані ці рядки (у Netscape 4):
якщо (bytes_per_val> 4)
{
bytes_per_val = 4;
}
|
Відповідь:
Браузер спробує перетворити chucknorris у шістнадцяткове значення.
Оскільки c є єдиним дійсним шістнадцятковим символом у chucknorris, значення перетворюється на: c00c00000000 (0 для всіх недійсних значень).
Потім браузер ділить результат на 3 групи: червоний = c00c, зелений = 0000, синій = 0000.
Оскільки дійсні шістнадцяткові значення для фонів html містять лише 2 цифри для кожного типу кольорів (r, g, b), останні 2 цифри усікаються з кожної групи, залишаючи значення rgb c00000, яке має цегляно-червонуватий колір.
|
chucknorris починається з c, і браузер зчитує його в шістнадцяткове значення.
Оскільки A, B, C, D, E та F є символами у шістнадцятковій системі.
Браузер перетворює chucknorris у шістнадцяткове значення, C00C00000000.
Потім шістнадцяткове значення C00C00000000 перетворюється у формат RGB (ділиться на 3):
C00C00000000 ⇒ R: C00C, G: 0000, B: 0000
Для позначення кольору браузеру потрібні лише дві цифри:
R: C00C, G: 0000, B: 0000 ⇒ R: C0, G: 00, B: 00 ⇒ C00000
Нарешті, покажіть bgcolor = C00000 у веб-браузері.
Ось приклад, що демонструє це:
<таблиця>

 chucknorris 
 c00c00000000 
 c00000 


|
Правила синтаксичного аналізу кольорів для застарілих атрибутів передбачають додаткові кроки, ніж ті, що згадані в існуючих відповідях. Зрізаний компонент до двозначної частини описується як:
Відкиньте всі символи, крім останніх 8
Відкиньте початкові нулі по одному, доки всі компоненти мають початковий нуль
Відкиньте всі символи, крім перших 2
Кілька прикладів:
oooFoooFoooF
000F 000F 000F <- заміна, прокладка та шматок
0F 0F 0F <- ведучі нулі усічені
0F 0F 0F <- усічено до 2 символів праворуч
oooFooFFoFFF
000F 00FF 0FFF <- заміна, прокладка та шматок
00F 0FF FFF <- ведучі нулі усічені
00 0F FF <- усічено до 2 символів праворуч
ABCooooooABCooooooABCoooooo
ABC000000 ABC000000 ABC000000 <- заміна, прокладка та шматок
BC000000 BC000000 BC000000 <- усічено до 8 символів зліва
До н.е. до н. Е. <- усічено до 2 символів праворуч
AoCooooooAoCooooooAoCoooooo
A0C000000 A0C000000 A0C000000 <- заміна, прокладка та шматок
0C000000 0C000000 0C000000 <- усічено до 8 символів зліва
C000000 C000000 C000000 <- ведучі нулі усічені
C0 C0 C0 <- усічено до 2 символів праворуч
Нижче наведена часткова реалізація алгоритму. Він не обробляє помилки або випадки, коли користувач вводить дійсний колір.
функція parseColor (введення) {
// todo: повернути помилку, якщо введено ""
input = input.trim ();
// todo: повернути помилку, якщо введення "прозоре"
// todo: повертає відповідний #rrggbb, якщо введенням є іменований колір
// todo: повертаємо #rrggbb, якщо введення збігається з #rgb
// todo: замініть кодові коди юнікоду, більші за U + FFFF, на 00
якщо (input.length> 128) {
input = input.slice (0, 128);
}
if (input.charAt (0) === "#") {
input = input.slice (1);
}
input = input.replace (/ [^ ^ 0-9A-Fa-f] / g, "0");
while (input.length === 0 || input.length% 3> 0) {
вхід + = "0";
}
var r = input.slice (0, input.length / 3);
var g = input.slice (input.length / 3, input.length * 2/3);
var b = input.slice (input.length * 2/3);
якщо (довжина r> 8) {
r = r. фрагмент (-8);
g = g. скибочка (-8);
b = b. скибочка (-8);
}
while (r.length> 2 && r.charAt (0) === "0" && g.charAt (0) === "0" && b.charAt (0) === "0") {
r = r. фрагмент (1);
g = g. скибочка (1);
b = b. фрагмент (1);
}
якщо (довжина r> 2) {
r = r. фрагмент (0, 2);
g = g. фрагмент (0, 2);
b = b.slice (0, 2);
}
повернути "#" + r.padStart (2, "0") + g.padStart (2, "0") + b.padStart (2, "0");
}
$ (function () {
$ ("# input"). on ("change", function () {
var input = $ (this) .val ();
var color = parseColor (введення);
var $ комірки = $ ("# result tbody td");
$ комірки.eq (0) .attr ("bgcolor", введення);
$ комірки.eq (1) .attr ("bgcolor", колір);
зміннийзначення:
https://html.spec.whatwg.org/multipage/infrastructure.html#rules-for-parsing-a-legacy-colour-value.
Код Netscape Classic, який використовується для розбору кольорових рядків, є відкритим:
https://dxr.mozilla.org/classic/source/lib/layout/layimage.c#155.
Наприклад, зауважте, що кожен символ аналізується як шістнадцяткова цифра, а потім переводиться у 32-бітове ціле число без перевірки на переповнення. Лише вісім шістнадцяткових цифр вміщуються в 32-бітове ціле число, саме тому враховуються лише останні 8 символів. Після синтаксичного аналізу шістнадцяткових цифр на 32-розрядні цілі числа, вони потім усікаються на 8-розрядні цілі числа, ділячи їх на 16, поки вони не поміщаються в 8-розрядні, тому провідні нулі ігноруються.
Оновлення: Цей код не точно відповідає визначеному в специфікації, але єдина різниця - кілька рядків коду. Я думаю, що були додані ці рядки (у Netscape 4):
якщо (bytes_per_val> 4)
{
bytes_per_val = 4;
}
|
Відповідь:
Браузер спробує перетворити chucknorris у шістнадцяткове значення.
Оскільки c є єдиним дійсним шістнадцятковим символом у chucknorris, значення перетворюється на: c00c00000000 (0 для всіх недійсних значень).
Потім браузер ділить результат на 3 групи: червоний = c00c, зелений = 0000, синій = 0000.
Оскільки дійсні шістнадцяткові значення для фонів html містять лише 2 цифри для кожного типу кольорів (r, g, b), останні 2 цифри усікаються з кожної групи, залишаючи значення rgb c00000, яке має цегляно-червонуватий колір.
|
chucknorris починається з c, і браузер зчитує його в шістнадцяткове значення.
Оскільки A, B, C, D, E та F є символами у шістнадцятковій системі.
Браузер перетворює chucknorris у шістнадцяткове значення, C00C00000000.
Потім шістнадцяткове значення C00C00000000 перетворюється у формат RGB (ділиться на 3):
C00C00000000 ⇒ R: C00C, G: 0000, B: 0000
Для позначення кольору браузеру потрібні лише дві цифри:
R: C00C, G: 0000, B: 0000 ⇒ R: C0, G: 00, B: 00 ⇒ C00000
Нарешті, покажіть bgcolor = C00000 у веб-браузері.
Ось приклад, що демонструє це:
<таблиця>

 chucknorris 
 c00c00000000 
 c00000 


|
Правила синтаксичного аналізу кольорів для застарілих атрибутів передбачають додаткові кроки, ніж ті, що згадані в існуючих відповідях. Зрізаний компонент до двозначної частини описується як:
Відкиньте всі символи, крім останніх 8
Відкиньте початкові нулі по одному, доки всі компоненти мають початковий нуль
Відкиньте всі символи, крім перших 2
Кілька прикладів:
oooFoooFoooF
000F 000F 000F <- заміна, прокладка та шматок
0F 0F 0F <- ведучі нулі усічені
0F 0F 0F <- усічено до 2 символів праворуч
oooFooFFoFFF
000F 00FF 0FFF <- заміна, прокладка та шматок
00F 0FF FFF <- ведучі нулі усічені
00 0F FF <- усічено до 2 символів праворуч
ABCooooooABCooooooABCoooooo
ABC000000 ABC000000 ABC000000 <- заміна, прокладка та шматок
BC000000 BC000000 BC000000 <- усічено до 8 символів зліва
До н.е. до н. Е. <- усічено до 2 символів праворуч
AoCooooooAoCooooooAoCoooooo
A0C000000 A0C000000 A0C000000 <- заміна, прокладка та шматок
0C000000 0C000000 0C000000 <- усічено до 8 символів зліва
C000000 C000000 C000000 <- ведучі нулі усічені
C0 C0 C0 <- усічено до 2 символів праворуч
Нижче наведена часткова реалізація алгоритму. Він не обробляє помилки або випадки, коли користувач вводить дійсний колір.
функція parseColor (введення) {
// todo: повернути помилку, якщо введено ""
input = input.trim ();
// todo: повернути помилку, якщо введення "прозоре"
// todo: повертає відповідний #rrggbb, якщо введенням є іменований колір
// todo: повертаємо #rrggbb, якщо введення збігається з #rgb
// todo: замініть кодові коди юнікоду, більші за U + FFFF, на 00
якщо (input.length> 128) {
input = input.slice (0, 128);
}
if (input.charAt (0) === "#") {
input = input.slice (1);
}
input = input.replace (/ [^ ^ 0-9A-Fa-f] / g, "0");
while (input.length === 0 || input.length% 3> 0) {
вхід + = "0";
}
var r = input.slice (0, input.length / 3);
var g = input.slice (input.length / 3, input.length * 2/3);
var b = input.slice (input.length * 2/3);
якщо (довжина r> 8) {
r = r. фрагмент (-8);
g = g. скибочка (-8);
b = b. скибочка (-8);
}
while (r.length> 2 && r.charAt (0) === "0" && g.charAt (0) === "0" && b.charAt (0) === "0") {
r = r. фрагмент (1);
g = g. скибочка (1);
b = b. фрагмент (1);
}
якщо (довжина r> 2) {
r = r. фрагмент (0, 2);
g = g. фрагмент (0, 2);
b = b.slice (0, 2);
}
повернути "#" + r.padStart (2, "0") + g.padStart (2, "0") + b.padStart (2, "0");
}
$ (function () {
$ ("# input"). on ("change", function () {
var input = $ (this) .val ();
var color = parseColor (введення);
var $ комірки = $ ("# result tbody td");
$ комірки.eq (0) .attr ("bgcolor", введення);
$ комірки.eq (1) .attr ("bgcolor", колір);
змінний